<template>
	<div style="padding-bottom: 20rpx;">
		<u-tabs name="name" font-size="32" :list="navList" :is-scroll="false" :current="current"
			@change="el => change(el, navList[el].value)"></u-tabs>

		<u-empty margin-top="30" :text="$t('列表为空')" v-if="list.length === 0" mode="list"></u-empty>
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="py20">
					<view class="top">
						<text class="id fs24">订单编号:{{ item.order_sn }}</text>
						<text class="theme-price fs24">{{ item.status_text }}</text>
					</view>
					<view class="center">
						<image class="w120 h120" :src="item.pic" mode="scaleToFill" />
						<view class="info">
							<view class="title" v-if="locale == 'cn' || locale == 'zh-Hans'">{{item.title}}</view>
							<view class="title" v-if="locale == 'ey'">{{item.wei_title}}</view>
							<view class="title" v-if="locale == 'kk'">{{item.ha_title}}</view>
							<!-- <view class="">预约金:{{ item.money }}</view> -->
						</view>
					</view>
				</view>
				<div class="flex row-between pt20 border-t">
					<view class="flex">
						<text class="mr10 w100">发布人:</text>
						<image class="w40 h40 radius" :src="item.uinfo.avatar" mode="scaleToFill" />
						<text class="ml10 truncate-1">{{ item.uinfo.name }}</text>
					</view>
					<text class="fs24 color-999 "> {{ item.uinfo.mobile }}</text>
				</div>

				<view class="flex row-between mt20">
					<view>
						<view v-if="item.status === 2" class="fs32" style="color:#fa3534"
							@click="showRefundModal(item)">
							退单
						</view>
					</view>
					<template v-if="item.status === 2">
						<view class="flex">
							<view class="theme-color  radius10 flex row-center w160 h65"
								style="background-color: #ecf5ff;border: 2rpx solid #ecf5ff;"
								@click="makePhone(item.uinfo.mobile)">联系客户</view>
							<view class="theme-bg-color color-fff radius10 flex row-center w160 h65 ml20"
								@click="showModal(item)">
								开始服务</view>
						</view>
					</template>
					<template v-else-if="item.status === 3">
						<view class="theme-bg-color color-fff radius10 flex row-center w160 h65"
							@click="openPopup(item)">
							完成服务</view>
					</template>
					<template v-else-if="item.status === 5">
						<view class="theme-bg-color color-fff radius10 flex row-center w160 h65" @click="pay(item)">
							立即提交</view>
					</template>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" v-if="list.length > params.page_size" />
		<u-modal v-model="show" :content="content" @confirm="submit" show-cancel-button></u-modal>
		<u-modal v-model="showRefund" content="确认取消本次订单!" @confirm="submitRefund" show-cancel-button></u-modal>


		<u-popup v-model="showPopup" mode="bottom" border-radius='16' height="60%">
			<view class="p30">
				<view class="mb20 fs34 fw500">服务图片</view>
				<u-upload name="img" width="150" height="150" :action="action" :file-list="fileList" max-count="8"
					:deletable="false" @on-uploaded="onUploaded"></u-upload>
				<view class="fs30 color-999 my30">如果订单出现纠纷，照片可用于平台评判</view>
				<u-button type="primary" @click="servicesCompleted">完成服务</u-button>
			</view>
		</u-popup>
	</div>
</template>

<script>
	import {
		makePhoneCall
	} from '@/common/utils/index';
	import $config from '@/api/http.baseUrl.js'
	export default {
		data() {
			return {
				locale: 'cn',
				action: `${$config.baseUrl}/system/basic/postUploadOne`,
				fileList: [],
				showPopup: false,
				showRefund: false,
				show: false,
				status: 'loadmore',
				list: [],
				navList: [{
						name: '全部',
						value: '0'
					},
					{
						name: '待服务',
						value: '2'
					},
					{
						name: '服务中',
						value: '3'
						// },
						// {
						//     name: '待提交',
						//     value: '5'
					},
					{
						name: '已完成',
						value: '4'
					}
				],
				current: 1,
				last_page: '',
				params: {
					page: 1,
					status: 2,
					page_size: 10,
				},
				currentItem: {},
				content: '',
				refundId: '',
				imgStyle: {
					width: '94rpx',
					height: '94rpx',
				},
				service_img: ''
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				this.$u.api.material().then(res => {
					uni.setStorageSync('is_house', res.data.data?.is_house);
					uni.setStorageSync('is_service', res.data.data?.is_service);
					this.getTabbar(res.data.data?.is_house, res.data.data?.is_service);
				});
			},
			getTabbar(is_house, is_service) {
				if (is_service === 1 && is_house === 1) {
					uni.setTabBarItem({
						// 修改底部导航
						index: 0,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 1,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 2,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 3,
						visible: true
					});
				}
			
				if (is_service === 1 && is_house === 0) {
					uni.setTabBarItem({
						// 修改底部导航
						index: 3,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 2,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 0,
						visible: false
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 1,
						visible: false
					});
				}
			
				if (is_service === 0 && is_house === 1) {
					uni.setTabBarItem({
						// 修改底部导航
						index: 3,
						visible: false
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 2,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 0,
						visible: true
					});
					uni.setTabBarItem({
						// 修改底部导航
						index: 1,
						visible: true
					});
				}
			},
			onUploaded(e) {
				console.log('e: ', e);
				const list = []
				e.forEach(el => {
					list.push(el.response.id)
				})
				this.service_img = list.join(',')
			},

			openPopup(item) {
				this.showPopup = true
				this.refundId = item.id
				this.currentItem = item

			},
			showRefundModal(item) {
				this.showRefund = true
				this.refundId = item.id
				this.currentItem = item

			},
			submitRefund() {
				this.$u.api.chargeback({
					id: this.refundId
				}).then(res => {
					this.$u.toast(res.msg)
					this.params.page = 1
					this.list = []
					this.getList()
				})
			},
			pay(item) {
				this.$u.api.submit_completed({
					order_sn: item.order_sn
				}).then(res => {
					this.$u.toast(res.msg)
					this.params.page = 1
					this.list = []
					this.getList()
				})
				// let order = {
				//     target: item.order_sn,
				//     target_type: 'finish_service',
				//     money: item.service_finish_amount
				// };
				// uni.navigateTo({
				//     url: '/pages/pay/index',
				//     success: res => {
				//         res.eventChannel.emit('orderInfo', {
				//             order
				//         });
				//     }
				// });
			},
			// 完成服务
			servicesCompleted() {
				this.$u.api.finish_service({
					id: this.currentItem.id,
					service_img: this.service_img
				}).then(res => {
					this.$u.toast(res.msg)
					this.showPopup = false
					this.params.page = 1
					this.list = []
					this.fileList = []
					this.getList()
				})
			},
			// 开始服务
			starService() {
				this.$u.api.star_service({
					id: this.currentItem.id
				}).then(res => {
					this.$u.toast(res.msg)
					this.params.page = 1
					this.list = []
					this.getList()
				})
			},
			submit() {
				if (this.currentItem.status == 2) {
					this.starService()
				} else if (this.currentItem.status == 3) {
					this.servicesCompleted()
				}

			},
			showModal(item, type) {
				if (item.status === 2) {
					this.content = '确认开始本次服务!'
				}
				if (item.status === 3) {
					this.content = '确认已完成本次服务!'
				}
				this.currentItem = item
				this.show = true
			},
			makePhone(phone) {
				makePhoneCall(phone)
			},
			change(index, value) {
				console.log('value: ', value);
				this.params.page = 1
				this.list = []
				this.current = index;
				this.params.status = value
				this.getList()
			},
			getList() {
				this.$u.api.service_order_self(this.params).then(res => {
					console.log('res: ', res);
					this.last_page = res.data.last_page
					this.list = [...this.list, ...res.data.data]
				})
			},

		},
		onPullDownRefresh() {

			setTimeout(() => {
				uni.stopPullDownRefresh()
				uni.reLaunch({
					url: '/pages/mine/orderList/index'
				});
			}, 800)
		},
		onReachBottom() {
			if (this.last_page > this.params.page) {
				this.status = 'loading'
				this.params.page++
				this.getList()
			} else {
				this.status = 'nomore'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		margin: 20rpx;

		.item {
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 16rpx;




			.price {
				font-weight: 500;
				font-size: 30rpx;
				color: #FD4834;
			}

			.top {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				.id {
					color: #999999;
				}
			}

			.center {
				display: flex;

				.info {
					margin-left: 20rpx;

					.title {
						font-size: 36rpx;
						font-weight: 500;
						margin: 20rpx 0;
					}

					.price {
						color: #FD4834
					}
				}
			}

			.time {
				text-align: right;
				color: #999;
			}
		}
	}
</style>
<style>
	page {

		background-color: #f8f8f8;
	}
</style>